<template>
  <div class="home">
    <div class="oip">
      <div class="sousuo">
        <img class="sou-t" src="../../public/images/3.jpg" alt="" />
        <div class="oin-t">
          <input type="text" placeholder="海豚计划" />
          <span class="iconfont icon-maikefeng-shi"></span>
        </div>
        <span class="sousuo-you">搜索</span>
      </div>
    </div>
    <!-- <Sousukuang></Sousukuang> -->
    <Daohanger-1></Daohanger-1>
    <div class="content">
      <div class="quanzi">
        <h3>我在的圈子</h3>
        <ul>
          <li v-for="quan in quanzi" :key="quan.id"><img :src="quan.img" /></li>
          <!-- <li><img src="../../public/images/q1.jpg" alt="" /></li>
          <li><img src="../../public/images/q1.jpg" alt="" /></li>
          <li><img src="../../public/images/q1.jpg" alt="" /></li> -->
        </ul>
      </div>
      <div class="news">
        <h3>最新发布</h3>
        <ul>
          <li v-for="att in attentions" :key="att.id">
            <img :src="att.img" />
            <p>{{ att.title }}</p>
            <div class="mass">
              <div class="p">
                <img :src="att.preson" />
                <i>{{ att.author }}</i>
              </div>
              <p>{{ att.num }}<span class="iconfont icon-aixin"></span></p>
            </div>
          </li>
          <!-- <li>
            <img src="../../public/images/n1.jpg" alt="" />
            <p>英语作文英语作文英语作文英语作</p>
            <div class="mass">
              <div class="p">
                <img src="../../public/images/x2.jpg" alt="" />
                <i>sweety</i>
              </div>
              <p>145<span class="iconfont icon-aixin"></span></p>
            </div>
          </li>
          <li>
            <img src="../../public/images/n1.jpg" alt="" />
            <p>英语作文英语作文英语作文英语作</p>
            <div class="mass">
              <div class="p">
                <img src="../../public/images/x2.jpg" alt="" />
                <i>sweety</i>
              </div>
              <p>145<span class="iconfont icon-aixin"></span></p>
            </div>
          </li> -->
        </ul>
      </div>
    </div>
    <Dibu></Dibu>
  </div>
</template>

<script>
import axios from "axios";
// import Vue from "vue";
import Dibu from "../components/dibu.vue";
import Sousukuang from "../components/sousukuang.vue";
import Daohanger1 from "../components/daohanger1.vue";

export default {
  name: "guanzhu",
  components: {
    Sousukuang,
    Daohanger1,
    Dibu,
  },
  data() {
    return {
      attentions: [],
      quanzi: [],
    };
  },
  created() {
    axios({
      url: "  http://localhost:3000/attentions",
      method: "get",
      params: {},
    }).then((res) => {
      //res.data直接就是后端返回来的数据，并且是json数据
      this.attentions = res.data;
    }),
      axios({
        url: "  http://localhost:3000/quanzi",
        method: "get",
        params: {},
      }).then((res) => {
        //res.data直接就是后端返回来的数据，并且是json数据
        this.quanzi = res.data;
      });
  },
};
</script>

<style scoped>
@import url(../assets/iconfont.css);
.home {
  background-color: #fff(240, 240, 240);
}

.content {
  width: 100%;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quanzi h3 {
  font-weight: 700;
  margin-top: 0.15rem;
}
.quanzi {
  width: 93%;
}
.quanzi ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.quanzi ul li {
  width: 22%;
  height: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.quanzi ul li img {
  width: 100%;
  height: 100%;
}

.news h3 {
  font-weight: 700;
  margin-top: 0.15rem;
}
.news {
  width: 93%;
  min-height: 8rem;
}
.news ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.news ul li {
  width: 45%;
  height: 3rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.news ul li img {
  width: 100%;
  height: 2rem;
}
.news ul li p {
  font-weight: 700;
  font-size: 0.15rem;
  margin-top: 0.1rem;
}
.news ul li .mass img {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.05rem;
}
.news ul li .mass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.1rem;
}
.news ul li .mass .p {
  display: flex;
  align-items: center;
}

.news ul li .mass i {
  font-size: 0.13rem;
  color: darkgray;
}
.news ul li .mass p {
  width: 0.5rem;
  font-size: 0.14rem;
  color: rgb(129, 128, 128);
}
.news ul li .mass p span {
  margin-left: 0.05rem;
  color: red;
}
.oip {
  height: 0.5rem;
  width: 3.6rem;
  background-color: #fff;
  position: fixed;
  top: 0rem;
  margin-left: 0.1rem;
  z-index: 100;
}
.sousuo {
  width: 3.5rem;
  height: 0.46rem;
  border: black solid 0.01rem;
  /* margin: auto; */
  border-radius: 0.1rem;
  line-height: 0.35rem;
  background-color: #fff;
  /* display: flex;
  align-items: center; */
  /* background-color: aqua; */
}
.sousuo span {
  font-size: 0.16rem;
  margin-top: 0.21rem;
}
.oin-t {
  height: 0.2rem;
  /* border-right: black 1px solid; */
  width: 2.3rem;
  margin-left: 0.4rem;
  margin-top: -0.29rem;
  line-height: 0.2rem;
}
.sousuo input {
  /* border: none; */
  margin-top: 0.13rem;
}
.sousuo .sousuo-you {
  display: block;
  width: 0.4rem;
  height: 0.17rem;
  color: #909090;
  margin-left: 2.8rem;
  margin-top: -0.15rem;
  /* margin-top: 0.3rem; */
}
.iconfont {
  margin-left: 0.09rem;
}
.sou-t {
  margin-left: 0.1rem;
  margin-top: 0.15rem;
}
icon-maikefeng-shi {
  font-size: 0.25rem;
}
</style>